<template>
  <div class="container">
    <div class="top">
      <div class="title">利润分析</div>
      <div class="box-container">
        <div
          class="box"
          style="background: linear-gradient(#f2f9fe, #e6f4fe)"
          @click="toSheet('Profit')"
        >
          <div class="profit-title">本月利润</div>
          <div class="profit-number">
            <span>{{ data.current_month_amont }}</span
            ><span>元</span>
          </div>
        </div>
        <div
          class="box"
          style="background: linear-gradient(#f5fef2, #e6feee)"
          @click="toSheet('Profit')"
        >
          <div class="profit-title">上月利润</div>
          <div class="profit-number">
            <span>{{ data.last_amont }}</span
            ><span>元</span>
          </div>
        </div>
        <div
          class="box"
          style="background: linear-gradient(#f2f9fe, #e6f4fe)"
          @click="toSheet('Profit')"
        >
          <div class="profit-title">本季度利润</div>
          <div class="profit-number">
            <span>{{ data.quarter_months_amont }}</span
            ><span>元</span>
          </div>
        </div>
        <div
          class="box"
          style="background: linear-gradient(#f6f6ff, #ececff)"
          @click="toSheet('Profit')"
        >
          <div class="profit-title">本年利润</div>
          <div class="profit-number">
            <span>{{ data.year_amont }}</span
            ><span>元</span>
          </div>
        </div>
      </div>
    </div>
    <div class="middle-title">
      <div style="width: 58vw">
        <span>选择维度:</span>
        <el-select v-model="value">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div>财务报表查看</div>
    </div>
    <div class="bottom">
      <div class="left">
        <month v-if="value === '月'"></month>
        <season v-if="value === '季'"></season>
        <year v-if="value === '年'"></year>
      </div>
      <div class="right">
        <el-divider
          style="width: 87%; margin-left: 2vw; margin-top: 4vh"
        ></el-divider>
        <div class="table">
          <span>利润表</span>
          <el-button type="text" @click="monthPick('profit')">查看 </el-button>
        </div>
        <div class="table">
          <span>资产负债表</span>
          <el-button type="text" @click="monthPick('debt')">查看 </el-button>
        </div>
        <div class="table">
          <span>余额表</span>
          <el-button type="text" @click="monthPick('balance')">查看 </el-button>
        </div>
        <div class="table">
          <span>明细账</span>
          <el-button type="text" @click="monthPick('detail')">查看 </el-button>
        </div>
        <div class="table">
          <span>会计分录</span>
          <el-button type="text" @click="monthPick('accountant')"
            >查看
          </el-button>
        </div>
        <div class="table">
          <span>工资表</span>
          <el-button type="text" @click="monthPick('salary')">查看 </el-button>
        </div>
      </div>
    </div>
    <el-dialog v-model="dialogFormVisible" title="请选择区间" width="25%">
      <div class="block">
        <span class="demonstration">区间：</span>
        <el-date-picker
          v-model="monthRange"
          type="monthrange"
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          value-format="YYYY-MM"
        />
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="toSheet()"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import month from "@/view/home/common/month.vue";
import season from "@/view/home/common/season.vue";
import year from "@/view/home/common/year.vue";
import { getData } from "@/api/getList.js";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const getDataList = () => {
  getData().then((res) => {
    data.value = res.data;
  });
};
onMounted(() => {
  getDataList();
});
// eslint-disable-next-line no-unused-vars
const value = ref("月");
const dateValue = ref(new Date());
const monthValue = dateValue.value.getMonth() + 1;
const monthRange = ref("");
const data = ref({});
const PATH = ref("");
const options = [
  {
    value: "月",
    label: "月度",
  },
  {
    value: "季",
    label: "季度",
  },
];
const dialogFormVisible = ref(false);
const monthPick = (path) => {
  monthRange.value = "";
  dialogFormVisible.value = true;
  PATH.value = path;
};
const toSheet = (p) => {
  dialogFormVisible.value = false;
  router.push({
    name: PATH.value.charAt(0).toUpperCase() + PATH.value.slice(1),
    state: {
      startMonth: monthRange.value[0],
      endMonth: monthRange.value[1],
    },
  });
};
</script>
<style lang="less"scoped>
.container {
  height: calc(100vh - 142px);

  .title {
    padding: 2vh;
    font-weight: bold;
  }

  .top {
    height: 25vh;
    background: @mainColor;
    border-radius: 5px;
  }

  .bottom {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    align-content: center;

    .left {
      width: 56vw;
      height: 55vh;
      padding: 1vh 0;
      background: @mainColor;
      border-radius: 5px;
    }

    .right {
      width: 30vw;
      height: 55vh;
      padding: 1vh 0;
      background: @mainColor;
      border-radius: 5px;
      display: flex;
      flex-wrap: nowrap;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      align-content: center;

      .table {
        margin-left: 2vw;
        margin-right: 2vw;
        padding: 1vh;
        width: 48vh;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
      }
    }
  }
}

.box-container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
  align-content: center;

  .box {
    padding: 2vh 0;
    width: 18vw;
    height: 13vh;
    border-radius: 5px;
  }
}

.middle-title {
  height: 5vh;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
}

.box {
  display: flex;
  flex-direction: column;
  align-content: center;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: baseline;

  .profit-title {
    margin: 1vh 1vw;
    height: 2vh;
    font-weight: 400;
  }

  .profit-number {
    margin: 2vh 1vw;
    width: 84%;
    height: 3vh;
    line-height: 3vh;
    font-size: 2.08333vw !important;
    font-weight: 300;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    flex-direction: row;
  }
}
</style>
